<script setup lang="ts">
import draggable from 'vuedraggable'
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  list: {
    type: Array,
    default: () => []
  },
  group: {
    type: Object,
    default: () => {}
  },
  dragClass: {
    type: String,
    default: () => ''
  },
  ghostClass: {
    type: String,
    default: () => ''
  },
  chosenClass: {
    type: String,
    default: () => ''
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const inputValue = ref(props.modelValue)

const change = (e: any) => {
  emit('change', e)
  emit('update:modelValue', inputValue.value)
}

watch(
  () => props.modelValue,
  (val) => {
    inputValue.value = val
  }
)
</script>

<template>
  <draggable
    v-model="inputValue"
    item-key="index"
    :group="props.group"
    :ghost-class="props.ghostClass"
    :drag-class="props.dragClass"
    @change="change"
  >
    <template #item="{ element, index }">
      <div>
        <slot slotName="default" :element="element" :index="index"></slot>
      </div>
    </template>
  </draggable>
</template>

<style lang="scss" scoped>

</style>
